<template>
  <div class="list-table">
    <ul class="moneyBox">
      <li style="background: linear-gradient(to right bottom, #FC6E7C 0%,#FFA185 100%);">
        <p>{{ $t('投资项目数量') }}</p>
        <span>{{ investSummaryValues.dealCount }}</span>
      </li>
      <!--   -->
      <li style="background: linear-gradient(to right bottom, #A46CF1 0%,#D99CFB 100%);">
        <p>{{ $t('投资基金数量') }}</p>
        <span>{{ investSummaryValues.fundCount }}</span>
      </li>
      <!--  -->
      <li style="background: linear-gradient(to right bottom, #3D9FFD 0%,#7AD6FF 100%);">
        <p>{{ $t('投资金额') }}{{ $t('金额单位') }}</p>
        <span>{{ moneyFormat(investSummaryValues.investmentAmount, 'w') }}</span>
      </li>
      <!--  -->
      <li style="background: linear-gradient(to right bottom, rgb(246,194,61) 0%, rgb(247,215,135) 100%);">
        <p>{{ $t('累计回款总额') }}{{ $t('金额单位') }}</p>
        <span>
          <span>{{ moneyFormat(investSummaryValues.receivableAmount, 'w') }}</span>
        </span>
      </li>
      <li style="background: linear-gradient(to right bottom, rgb(95,90,255) 0%, rgb(159,173,241) 100%);">
        <p>{{ $t('累计回款本金') }}{{ $t('金额单位') }}</p>
        <span>
          <span>{{ moneyFormat(investSummaryValues.receivableAmountPrincipal, 'w') }}</span>
        </span>
      </li>
      <li style="background: linear-gradient(to right bottom, rgb(255,123,98) 0%, rgb(247,215,135) 100%);">
        <p>{{ $t('累计回款收益') }}{{ $t('金额单位') }}</p>
        <span>
          <span>{{ moneyFormat(investSummaryValues.receivableAmountEarnings, 'w') }}</span>
        </span>
      </li>
    </ul>

    <el-tabs v-if="!noPermission" v-model="activeName" @tab-click="clickMenu">
      <el-tab-pane v-for="(item, key) in childMenuTabs" :key="key" :lazy="true" :label="$t(item.menuName)" :name="item.menuName">
        <component :is="menuPath" v-show="item.flag" ref="menuPath" />
      </el-tab-pane>
    </el-tabs>
    <div v-else>
      <div style="height: 650px;">
        <div style="width: 300px; height: 300px; position: absolute;left: 0;right: 0; margin: 8% auto;">
          <img :src="errGif" style="width: 300px; height: 300px;" alt="Girl has dropped her ice cream.">
          <div style="text-align: center;color: #c1baba;font-size: 14px;margin-top: -20px;">暂无权限</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import errGif from '@/assets/404_images/404_null.png'
  import { getSpvTitleNumbers } from '@/api/fund/fundBase'
  import { childMenuList } from '@/api/system/menu'
  import { getAsyncComponent } from '@/utils'
  import { listFundIncome } from '@/api/fund/income/fundIncome'
  export default {
    components: {
    },
    data() {
      return {
        activeName: '',
        menuKey: 'fund_tzzh_spv',
        // 加载
        loading: true,
        // 子页签
        childMenuTabs: [],
        // 组件地址
        menuPath: '',
        // 参数
        parameter: {},
        dealType: '',
        // 汇总信息
        investSummaryValues: {
          dealCount: '',
          fundCount: '',
          investmentAmount: '',
          receivableAmount: '',
          receivableAmountPrincipal: '',
          receivableAmountEarnings: ''
        },
        noPermission: false,
        errGif: errGif + '?' + new Date().getTime()
      }
    },
    created() {
      this.listLoad()
    },
    mounted() {
      // 获取汇总值
      this.getSummaryValues()
    },
    methods: {
      listLoad() {
        this.loading = true
        this.noPermission = false
        // 菜单列表
        childMenuList(this.menuKey).then(response => {
          this.childMenuTabs = response.rows
          if (this.childMenuTabs !== null && this.childMenuTabs !== undefined && this.childMenuTabs.length > 0) {
            this.activeName = this.childMenuTabs[0] === undefined ? '' : this.childMenuTabs[0].menuName
            this.clickMenu(response.rows[0])
          } else {
            this.noPermission = true
          }
          this.loading = false
        })
      },
      clickMenu(tab) {
        this.childMenuTabs && this.childMenuTabs.forEach(item => {
          if (item.menuName === tab.menuName || item.menuName === tab.name) {
            this.$nextTick(() => {
              this.$set(item, 'flag', true)
              this.importFormPath(item.component)
            })
          } else {
            this.$set(item, 'flag', false)
          }
        })
      },
      // 引入组件
      importFormPath(menuPath) {
        if (menuPath) {
          if (menuPath.indexOf('?') === -1) { // 不含问号
            this.menuPath = getAsyncComponent('@/views/' + menuPath)
            this.parameter = {}
          } else {
            const index = menuPath.lastIndexOf('?')
            const sMenuPath = menuPath.substring(0, index)
            this.menuPath = getAsyncComponent('@/views/' + sMenuPath)

            // 增加参数
            const newKey = menuPath.split('?')[1]
            var newstr = newKey.replace(/=/g, '":"')
            const objectKey = '{"' + newstr.replace(/&/g, '","') + '"}'
            this.parameter = JSON.parse(objectKey)
            if (this.parameter !== undefined && this.parameter.dealType !== undefined) {
              this.dealType = this.parameter.dealType
            }
            console.log(this.dealType)
          }
          // 地址栏添加左侧菜单地址
          this.$nextTick(() => {
            this.$route.params.dealType = this.dealType
          })
        } else {
          const error = 'error/404'
          this.importFormPath(error)
        }
      },
      // 获取汇总值
      getSummaryValues() {
        this.investSummaryValues = {
          dealCount: 0,
          fundCount: 0,
          investmentAmount: 0,
          receivableAmount: 0,
          receivableAmountPrincipal: 0,
          receivableAmountEarnings: 0
        }
        // 获取投资项目数量, 投资基金数量, 投资金额
        getSpvTitleNumbers(this.$route.query.id).then(response => {
          this.investSummaryValues.dealCount = response.data.dealCount
          this.investSummaryValues.fundCount = response.data.fundCount
          this.investSummaryValues.investmentAmount = response.data.investmentAmount
        })
        // 获取其他
        listFundIncome({ fundId: this.$route.query.id }).then(response => {
          console.log('1', response)
          if (response.rows !== null) {
            response.rows.forEach(item => {
              // 本金 amountPrincipal
              if (item.amountPrincipal !== null && !isNaN(parseFloat(item.amountPrincipal))) {
                this.investSummaryValues.receivableAmountPrincipal += parseFloat(item.amountPrincipal)
              }
              // 收益 amountIncome
              if (item.amountIncome !== null && !isNaN(parseFloat(item.amountIncome))) {
                this.investSummaryValues.receivableAmountEarnings += parseFloat(item.amountIncome)
              }
              // 回款总额 amountDistribution
              if (item.amountDistribution !== null && !isNaN(parseFloat(item.amountDistribution))) {
                this.investSummaryValues.receivableAmount += parseFloat(item.amountDistribution)
              }
            })
          }
        })
      }
    }
  }
</script>
